<template>
  <base-option :selected="selected" :field-config="fieldConfig" :form-config="formConfig">
    <template #default="{ hideOptions }">
      <el-form-item label="可选范围">
        <div style="display: block">
          <el-switch v-model="fieldConfig.selectType" size="default" @change="fieldConfig.selectRange = []" />
          <span v-show="!fieldConfig.selectType" class="label-switch color-g9">
            (可关联全部审批单，并随着应用的新增/停用变化)
          </span>
        </div>
      </el-form-item>

      <el-form-item v-show="fieldConfig.selectType" label="选择审批" required>
        <el-select v-model="fieldConfig.selectRange" multiple collapse-tags-tooltip :max-collapse-tags="1">
          <el-option-group v-for="group in correlationOptionsList" :key="group.label" :label="group.label">
            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item v-if="fieldConfig.limit !== undefined && hideOptions('limit')" label="最大关联数">
        <el-input-number v-model="fieldConfig.limit" :min="1" :max="20" controls-position="right" />
      </el-form-item>
      <el-form-item v-if="fieldConfig.tip !== undefined && hideOptions('tip')" label="提示内容">
        <el-input v-model="fieldConfig.tip" placeholder="" style="font-size: 13px" />
      </el-form-item>
    </template>
  </base-option>
</template>

<script setup>
import { toRefs, inject, computed } from 'vue'
import baseOption from './base-option.vue'
const correlationOptions = inject('correlationOptions')
import propsDefinition from './props'
const props = defineProps(propsDefinition)
const { selected, fieldConfig, formConfig } = toRefs(props)

const correlationOptionsList = computed(() => {
  return correlationOptions.value || []
})
</script>
